<template>
  <div class="userpage">
    <!-- <div class="page-title">
			<img src="../assets/img/ico.png" alt="" srcset="">
			<p>用户数据</p>
		</div> -->
    <div class="user-head">
      <div class="search">
        <div class="s-inp">
          <img src="../assets/img/ss.png" alt="" srcset="" />
          <el-input
            class="inp"
            placeholder="请输入邮箱或者地址"
            v-model="content"
            clearable
          ></el-input>
          <!-- <input type="text" v-model="content" placeholder="请输入邮箱或者地址" class="inp"> -->
        </div>
        <button @click="search('1')">查询</button>
        <button
          class="btn3"
          style="margin-right: 10px"
          @click="returnHomePage()"
        >
          返回用户主页
        </button>
      </div>
      <div class="user-do">
        <button
          class="btn3"
          style="margin-right: 10px"
          @click="showControlUser()"
        >
          查看已调控用户
        </button>
        <button class="btn1" @click="_blacklistOperation()">拉黑</button>
        <button class="btn2" @click="_unblacklistOperation()">解黑</button>
        <button class="btn3" @click="getTodayRegist('2')">
          今日新增用户及跑步
        </button>
      </div>
    </div>
    <div class="list-box" id="list-box">
      <!-- 查看已调控用户列表 -->
      <el-table
        ref="usersTable"
        :data="list"
        v-loading="loading"
        :height="height"
        stripe
        style="width: 100%"
        header-row-class-name="headcss"
        @selection-change="SelectionChange"
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
          fixed="left"
        ></el-table-column>
        <el-table-column prop="Id" label="ID" align="center"></el-table-column>
        <el-table-column prop="Addr" label="地址" align="center" width="180">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.Addr"
              placement="top"
            >
              <p style="cursor: pointer">{{ addrStr(scope.row.Addr, 8) }}</p>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="Email"
          label="邮箱"
          align="center"
          width="190"
        ></el-table-column>
        <el-table-column
          prop="CreateTime"
          label="注册日期"
          align="center"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="UseProfit"
          label="可领取"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="TotalProfit"
          label="总收益"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="StaticRatio"
          label="静态调控比例"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="DynamicRatio"
          label="动态调控比例"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="Code"
          label="邀请码"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="Father"
          label="邀请关系"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="TeamNum"
          label="团队"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="People"
          label="有效邀请"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="TotalCost"
          label="总花费"
          align="center"
        ></el-table-column>

        <el-table-column prop="BlackFlag" label="黑名单" align="center">
          <template slot-scope="scope">
            {{ scope.row.BlackFlag == 1 ? "黑名单" : "正常" }}
          </template>
        </el-table-column>
        <el-table-column prop="Active" label="激活" align="center">
          <template slot-scope="scope">
            {{ scope.row.Active > 0 ? "已激活" : "未激活" }}
          </template>
        </el-table-column>
        <el-table-column prop="Fueled" label="燃料状态" align="center">
          <template slot-scope="scope">
            {{ scope.row.Fueled == 0 ? "正常" : "欠燃料" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="Steps"
          label="今日步数"
          align="center"
        ></el-table-column>
        <el-table-column prop="is_score," label="认证状态" align="center">
          <template slot-scope="scope">
            {{
              scope.row.VideoCheck == 1001
                ? "已认证"
                : scope.row.VideoCheck == 1002
                ? "审核失败"
                : "未认证"
            }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="336">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="openAssits(scope.row.Addr)"
              type="text"
              size="medium"
            >
              背包
            </el-button>
            <el-button
              @click.native.prevent="openIncome(scope.row.Addr)"
              type="text"
              size="medium"
            >
              收益
            </el-button>
            <el-button
              @click.native.prevent="openControlModal(scope.row)"
              type="text"
              size="medium"
            >
              收益调控
            </el-button>
            <el-button
              @click.native.prevent="openTeam(scope.row.Email)"
              type="text"
              size="medium"
            >
              团队
            </el-button>
            <el-button
              @click.native.prevent="openBuy(scope.row.Addr, 'sny')"
              type="text"
              size="medium"
            >
              合成
            </el-button>
            <el-button
              @click.native.prevent="openBuy(scope.row.Addr, 'buy')"
              type="text"
              size="medium"
            >
              购买
            </el-button>
            <el-button
              @click.native.prevent="openGd(scope.row.Addr)"
              type="text"
              size="medium"
            >
              挂单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-limit">
      <el-pagination
        @size-change="SizeChange"
        @current-change="CurrentChange"
        :current-page="currentPage"
        :page-sizes="[15, 50, 100, 200]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <AssetComponent ref="asset" />
    <TeamComponent ref="team" />
    <IncomeComponent ref="income" />
    <BuysComponent ref="buy" />
    <SnysComponent ref="sny" />
    <GdComponent ref="gd" />
    <ChangeUserControlComponent
      :openAssits="openAssits"
      :openIncome="openIncome"
      :openControlModal="openControlModal"
      :openTeam="openTeam"
      :openBuy="openBuy"
      :openGd="openGd"
      ref="changeControl"
    />
    <!-- 数据调控窗口 -->
    <el-dialog title="收益调控" :visible.sync="controlVisibal" width="30%">
      <div>user: {{ selectRow.Addr }}</div>
      <div>email: {{ selectRow.Email }}</div>
      <div class="dialog_layout">
        <div class="column_box">
          <div class="input_layout">
            <input type="text" v-model="staticValue" class="einp" />
            <button class="enip_button" @click="handleSettings('1')">
              设置
            </button>
          </div>
          <span class="label">静态收益比</span>
        </div>
        <div class="column_box">
          <div class="input_layout">
            <input type="text" v-model="activeValue" class="einp" />
            <button class="enip_button" @click="handleSettings('2')">
              设置
            </button>
          </div>
          <span class="label">动态收益比</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="controlVisibal = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getUsersBase, blacklistOperation, setRewardRatio } from "@/utils/api";
import AssetComponent from "@/components/assetComponent.vue";
import TeamComponent from "@/components/teamComponent.vue";
import IncomeComponent from "@/components/incomeComponent.vue";
import BuysComponent from "@/components/buysComponent.vue";
import SnysComponent from "@/components/snysComponent.vue";
import GdComponent from "@/components/guadansComponent.vue";
export default {
  components: {
    AssetComponent,
    TeamComponent,
    IncomeComponent,
    BuysComponent,
    GdComponent,
    SnysComponent,
  },
  data() {
    return {
      currentPage: 1,
      size: 15,
      total: 0,
      height: "100%",
      option: "userbase-all",
      loading: false,
      list: [],
      type: 1,
      content: "",
      doArry: [],
      controlVisibal: false,
      selectRow: {},
      selectAddr: "",
      selectAddrText: "",
      staticValue: "",
      activeValue: "",
    };
  },
  mounted() {
    this._getUsersBase();
  },
  methods: {
    // 基础查询
    async _getUsersBase() {
      let params = {
        option: this.option,
        size: this.size,
        page: this.currentPage - 1,
      };
      this.loading = true;
      let { data, response } = await getUsersBase(params);
      let { total, dataList } = data;
      this.loading = false;
      this.total = total;
      this.list = dataList;
    },
    //搜索
    async search(type) {
      this.type = type;
      if (!this.content) {
        this.currentPage = 1;
        this._getUsersBase();
        return;
      }
      var type =
        this.content.indexOf("@") == -1 ? "userbase-addr" : "userbase-email";
      let params = {
        option: type,
        email: this.content,
        addr: this.content,
        size: this.size,
        page: this.currentPage - 1,
      };
      this.loading = true;
      let { data, response } = await getUsersBase(params);
      let { total, dataList } = data;
      this.loading = false;
      this.total = total;
      this.list = dataList;
    },
    //查询当日新注册用户
    async getTodayRegist(type) {
      this.type = type;
      let params = {
        option: "userbase-today",
        size: this.size,
        page: this.currentPage - 1,
      };
      this.loading = true;
      let { data, response } = await getUsersBase(params);
      let { total, dataList } = data;
      this.loading = false;
      this.total = total;
      this.list = dataList;
    },
    //拉黑操作
    async _blacklistOperation() {
      if (this.doArry.length == 0) {
        this.$message.error("请选择要拉黑的账户");
        return;
      }
      const em = this.doArry.map((item) => {
        return item.Email;
      });
      let params = {
        option: "batch-byEmail-addblack",
        exdata: em,
        flag: 1,
      };
      let { data, response } = await blacklistOperation(params);
      if (response.errCode == 0) {
        this.$message.success("拉黑成功");
        this.doArry = [];
        this.$refs.usersTable.clearSelection();
        this._getUsersBase();
      }
    },
    //解黑操作
    async _unblacklistOperation() {
      if (this.doArry.length == 0) {
        this.$message.error("请选择要解除黑名单的账户");
        return;
      }
      const em = this.doArry.map((item) => {
        return item.Email;
      });
      let params = {
        option: "batch-byEmail-unaddblack",
        exdata: em,
        flag: 0,
      };
      let { data, response } = await blacklistOperation(params);
      if (response.errCode == 0) {
        this.$message.success("解除黑名单成功");
        this.doArry = [];
        this.$refs.usersTable.clearSelection();
        this._getUsersBase();
      }
    },
    returnHomePage() {
      this.option = "userbase-all";
      this._getUsersBase();
    },
    openControlModal(row) {
      const { StaticRatio, DynamicRatio } = row;
      this.selectRow = row;
      this.activeValue = DynamicRatio;
      this.staticValue = StaticRatio;
      this.controlVisibal = true;
    },
    showControlUser() {
      this.option = "userbase-set-reward";
      this._getUsersBase();
    },
    handleSettings(type) {
      const params = {
        addr: this.selectRow.Addr,
        option: type === "1" ? "static" : "dynamic",
        exdata: Number(
          type == 1
            ? Number(this.staticValue).toFixed(2)
            : Number(this.activeValue).toFixed(2)
        ),
      };
      setRewardRatio(params).then((res) => {
        this.$message.success("设置成功");
        this._getUsersBase();
      });
    },
    SelectionChange(val) {
      this.doArry = val;
    },
    SizeChange(size) {
      this.size = size;
      this.currentPage = 1;
      if (this.type == 1) {
        this._getUsersBase();
      } else {
        this.getTodayRegist("2");
      }
    },
    CurrentChange(page) {
      this.currentPage = page;
      if (this.type == 1) {
        this._getUsersBase();
      } else {
        this.getTodayRegist("2");
      }
    },
    openAssits(addr) {
      this.$refs.asset.open(addr);
    },
    openIncome(addr) {
      this.$refs.income.open(addr);
    },
    openTeam(item) {
      this.$refs.team.open(item);
    },
    openBuy(item, type) {
      if (type == "buy") {
        this.$refs.buy.open(item, type);
      } else {
        this.$refs.sny.open(item, type);
      }
    },
    openGd(item) {
      this.$refs.gd.open(item);
    },
    addrStr(str, num) {
      if (str) {
        if (num) {
          return (
            str.substring(0, num) +
            "..." +
            str.substring(str.length - num, str.length)
          );
        } else {
          return (
            str.substring(0, 10) +
            "..." +
            str.substring(str.length - 10, str.length)
          );
        }
      } else {
        return str;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.userpage {
  padding: 20px 20px 10px 20px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.list-box {
  flex: 1;
  overflow-y: scroll;
}
.page-limit {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
.user-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
}
.stsr {
  color: #2389fe;
  font-weight: bolder;
  margin: 0 4px;
  font-size: 16px;
}
.search {
  display: flex;
  align-items: center;
  width: 520px;
  .s-inp {
    height: 40px;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0 10px;
    border-radius: 5px;
    flex: 1;
    .inp {
      border: none;
      outline: none;
      flex: 1;
    }
    img {
      margin-right: 10px;
    }
  }
  button {
    width: 70px;
    height: 40px;
    background: #2389fe;
    border-radius: 5px;
    color: #fff;
    margin-left: 10px;
    &:active {
      opacity: 0.8;
    }
  }
  .btn3 {
    width: 101px;
  }
}
.user-do {
  display: flex;
  align-items: center;
  .btn1 {
    width: 70px;
    height: 40px;
    background: rgba(211, 12, 63, 0.99);
    border-radius: 5px;
    color: #fff;
    &:active {
      opacity: 0.8;
    }
  }
  .btn2 {
    width: 70px;
    height: 40px;
    background: #2389fe;
    border-radius: 5px;
    color: #fff;
    margin: 0 10px;
    &:active {
      opacity: 0.8;
    }
  }
  .btn3 {
    width: 171px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #2389fe;
    color: #2389fe;
    background: #fff;
    &:active {
      border: 1px solid #15549d;
      color: #15549d;
    }
  }
}
.page-title {
  display: flex;
  align-items: center;
  padding-bottom: 20px;

  p {
    margin-left: 10px;
    font-size: 24px;
    color: #333333;
  }

  img {
    width: 24px;
  }
}
</style>
<style>
.el-table {
  border-radius: 5px;
}
.el-table th.el-table__cell {
  background-color: #2389fd !important;
  color: #fff;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #deeeff !important;
}
.el-table td.el-table__cell {
  border: none;
}
.inp .el-input__inner {
  border: none;
  padding-left: 0;
}
.einp {
  border: #330ed3 1px solid;
  height: 30px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  width: 80px;
  text-align: center;
  font-size: 20px;
  color: #f01e7d;
  box-sizing: border-box;
  outline: none;
}
.enip_button {
  height: 30px;
  background: #330ed3;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
  color: #fff;
  width: 40px;
  font-size: 12px;
}
.input_layout {
  display: flex;
}
.column_box {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  width: 50%;
  align-items: center;
}
.label {
  font-size: 16px;
  color: #999;
  margin-top: 10px;
  text-align: center;
}
.dialog_layout {
  display: flex;
}
</style>
